<template>
  <div class="talk">
    <div class="top">
      <div class="back" @click="toBack">
        <el-icon :style="{ fontSize: '18px' }"><arrow-left /></el-icon>
      </div>
      <span>{{ userDeatil.nickname }}</span>
    </div>
    <div class="t-center">
      <div class="t-main">
        <template v-for="item in contents" :key="item.id">
          <div class="my" v-if="item.isMe">
            <div class="text-auto-line">{{ item.msgs }}</div>
          </div>
          <div class="others" v-else>
            <div class="img" @click="toUser">
              <img
                :src="$filters.formatImgSize(userDeatil.avatarUrl, 40)"
                alt="404"
              />
            </div>
            <div class="message text-auto-line">
              {{ item.msgs }}
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="t-btm">
      <div class="myself">
        <el-input
          type="textarea"
          :placeholder="'回复' + userDeatil.nickname + ':'"
          v-model="textComment"
          maxlength="140"
          show-word-limit
          resize="none"
        ></el-input>
        <el-button
          size="mini"
          round
          type="info"
          style="float: right; margin-top: 10px"
          @click="SentComment"
        >
          发送
          <el-icon><edit></edit></el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue'
import { useRouter } from 'vue-router'
import { getTalks, sentText } from '@/service/letter'
import emitter from '@/utils/events'
const props = defineProps({
  uid: {
    type: Number,
    required: true
  }
})
const router = useRouter()
const emits = defineEmits(['handelTalk'])
const textComment = ref('')
const contents: any = ref([])
const userDeatil = ref<any>({})
const getContent = (id: number) => {
  getTalks(id).then((res: any) => {
    contents.value = formatData(res.msgs)
    userDeatil.value = getRealUser(res.msgs[0])
  })
}
getContent(props.uid)
const toBack = () => {
  emits('handelTalk')
}
const SentComment = () => {
  if (textComment.value === '') {
    return false
  }
  sentText(props.uid, textComment.value).then((res: any) => {
    if (res.code === 200) {
      textComment.value = ''
      getContent(props.uid)
    }
  })
}
const toUser = () => {
  router.push('/main/user' + props.uid)
  emitter.emit('handelClose', false)
}
// 获取对应聊天对象的信息
const getRealUser = (obj: any) => {
  if (obj.fromUser.userId === props.uid) {
    return obj.fromUser
  } else {
    return obj.toUser
  }
}
// 格式化传递过来的数组 加上标识 以及 msg JSON处理
const formatData = (data: any) => {
  for (const item of data) {
    item.isMe = item.fromUser.userId !== props.uid
    item.msgs = JSON.parse(item.msg).msg
  }
  return [...data]
}
</script>

<style scoped lang="less">
.talk {
  width: 100%;
  display: flex;
  flex-direction: column;
  .top {
    padding: 10px 0px;
    position: relative;
    text-align: center;
    border-bottom: 1px solid #d6e7f9;
    .back {
      position: absolute;
      left: 6px;
      top: 9px;
      cursor: pointer;
      &:hover {
        color: yellow;
      }
    }
    > span {
      color: #333;
      font-size: 15px;
    }
  }
  .t-center {
    width: 100%;
    height: 570px;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    .t-main {
      width: 100%;
      min-height: 230px;
      max-height: 100%;
      overflow: auto;
      display: flex;
      flex-direction: column-reverse;
      .my {
        display: flex;
        justify-content: right;
        width: 100%;
        // min-height: 20px;
        margin: 8px 0;
        > div {
          max-width: 215px;
          background: #d6e7f9;
          border-radius: 5px;
          line-height: 20px;
          padding: 10px 9px;
          min-height: 20px;
        }
      }
      .others {
        display: flex;
        // min-height: 30px;
        width: 100%;
        margin: 8px 0;
        .img {
          margin-right: 5px;
          cursor: pointer;
          img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
          }
        }
        .message {
          max-width: 215px;
          background: #f1f2f3;
          border-radius: 5px;
          font-size: 13px;
          padding: 10px 9px;
          line-height: 20px;
          min-height: 20px;
        }
      }
    }
  }
  .t-btm {
    flex: 1;
    .myself {
      margin: 6px 0 4px 0;
    }
  }
}
</style>
